<template>
    <div class="orderConfirm">
      <order-header title="订单确认">
        <template v-slot:tip>
          <span>请认真填写收货地址</span>
        </template>
      </order-header>
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position: absolute; width: 0px; height: 0px; overflow: hidden;">
        <defs>
            <symbol id="icon-add" viewBox="0 0 31 32">
            <title>add</title>
            <path d="M30.745 15.152h-14.382v-14.596c0-0.308-0.243-0.557-0.543-0.557s-0.543 0.249-0.543 0.557v14.596h-14.665c-0.3 0-0.543 0.249-0.543 0.557s0.243 0.557 0.543 0.557h14.665v15.177c0 0.307 0.243 0.557 0.543 0.557s0.543-0.249 0.543-0.557v-15.177h14.382c0.3 0 0.543-0.249 0.543-0.557s-0.243-0.557-0.543-0.557z" class="path1"></path>
            </symbol>
            <symbol id="icon-edit" viewBox="0 0 32 32">
            <title>edit</title>
            <path d="M28.287 8.51l-4.805-4.806 0.831-0.831c0.472-0.472 1.086-0.777 1.564-0.777 0.248 0 0.452 0.082 0.622 0.253l3.143 3.144c0.539 0.54 0.133 1.529-0.524 2.186l-0.831 0.831zM26.805 9.992l-1.138 1.138-4.805-4.806 1.138-1.138 4.805 4.806zM24.186 12.612l-14.758 14.762-4.805-4.806 14.758-14.762 4.805 4.806zM7.379 28.288l-4.892 1.224 1.223-4.894 3.669 3.67zM31.123 4.011l-3.143-3.144c-0.567-0.567-1.294-0.867-2.103-0.867-1.036 0-2.174 0.52-3.045 1.391l-20.429 20.436c-0.135 0.134-0.23 0.302-0.276 0.487l-2.095 8.385c-0.089 0.355 0.017 0.736 0.276 0.995 0.198 0.198 0.461 0.307 0.741 0.307 0.085 0 0.171-0.010 0.254-0.031l8.381-2.096c0.185-0.047 0.354-0.142 0.487-0.276l20.43-20.436c1.409-1.41 2.042-3.632 0.524-5.15v0z" class="path1"></path>
            </symbol>
            <symbol id="icon-del" viewBox="0 0 32 32">
            <title>delete</title>
            <path d="M11.355 4.129v-2.065h9.29v2.065h-9.29zM6.194 29.935v-23.742h19.613v23.742h-19.613zM30.968 4.129h-8.258v-3.097c0-0.569-0.463-1.032-1.032-1.032h-11.355c-0.569 0-1.032 0.463-1.032 1.032v3.097h-8.258c-0.569 0-1.032 0.463-1.032 1.032s0.463 1.032 1.032 1.032h3.097v24.774c0 0.569 0.463 1.032 1.032 1.032h21.677c0.569 0 1.032-0.463 1.032-1.032v-24.774h3.097c0.569 0 1.032-0.463 1.032-1.032s-0.463-1.032-1.032-1.032v0z" class="path1"></path>
            <path d="M10.323 9.806c-0.569 0-1.032 0.463-1.032 1.032v14.452c0 0.569 0.463 1.032 1.032 1.032s1.032-0.463 1.032-1.032v-14.452c0-0.569-0.463-1.032-1.032-1.032z" class="path2"></path>
            <path d="M16 9.806c-0.569 0-1.032 0.463-1.032 1.032v14.452c0 0.569 0.463 1.032 1.032 1.032s1.032-0.463 1.032-1.032v-14.452c0-0.569-0.463-1.032-1.032-1.032z" class="path3"></path>
            <path d="M21.677 9.806c-0.569 0-1.032 0.463-1.032 1.032v14.452c0 0.569 0.463 1.032 1.032 1.032s1.032-0.463 1.032-1.032v-14.452c0-0.569-0.463-1.032-1.032-1.032z" class="path4"></path>
            </symbol>
        </defs>
        </svg>
        <div class="wrapper">
            <div class="container">
                <div class="order-box">
                <div class="item-address">
                    <h2 class="addr-title">收货地址</h2>
                    <div class="addr-list clearfix">
                    <div class="addr-info"
                        @click="selectedArr = item"
                        :class="{'checked' : selectedArr.id === item.id}"
                        v-for="item of addressList"
                        :key="item.id">
                        <h2>{{item.receiverName}}</h2>
                        <div class="phone">{{item.receiverMobile}}</div>
                        <div class="street">{{item.receiverProvince + ' ' + item.receiverCity + ' ' + item.receiverDistrict}}<br>{{item.receiverAddress}}</div>
                        <div class="action">
                        <a href="javascript:;" class="fl" @click="openDelModal(item)">
                            <svg class="icon icon-del"><use xlink:href="#icon-del"></use></svg>
                        </a>
                        <a href="javascript:;" class="fr" @click="openEditModal(item)">
                            <svg class="icon icon-edit"><use xlink:href="#icon-edit"></use></svg>
                        </a>
                        </div>
                    </div>
                    <div class="addr-add" @click="openAddressModal">
                        <div class="icon-add"></div>
                        <div>添加新地址</div>
                    </div>
                    </div>
                </div>
                <div class="item-good">
                    <h2>商品</h2>
                    <ul>
                        <li v-for="item of cartList" :key="item.id">
                            <div class="good-name">
                            <img v-lazy="item.productMainImage" alt="">
                            <span>{{item.productName + ' ' + item.productSubtitle}}</span>
                            </div>
                            <div class="good-price">{{item.productPrice}}元x{{item.quantity}}</div>
                            <div class="good-total">{{item.productTotalPrice}}元</div>
                        </li>
                    </ul>
                </div>
                <div class="item-shipping">
                    <h2>配送方式</h2>
                    <span>包邮</span>
                </div>
                <div class="item-invoice">
                    <h2>发票</h2>
                    <a href="javascript:;">电子发票</a>
                    <a href="javascript:;">个人</a>
                </div>
                <div class="detail">
                    <div class="item">
                    <span class="item-name">商品件数：</span>
                    <span class="item-val">{{totalCount}}件</span>
                    </div>
                    <div class="item">
                    <span class="item-name">商品总价：</span>
                    <span class="item-val">{{totalPrice}}元</span>
                    </div>
                    <div class="item">
                    <span class="item-name">优惠活动：</span>
                    <span class="item-val">0元</span>
                    </div>
                    <div class="item">
                    <span class="item-name">运费：</span>
                    <span class="item-val">0元</span>
                    </div>
                    <div class="item-total">
                    <span class="item-name">应付总额：</span>
                    <span class="item-val">{{totalPrice}}元</span>
                    </div>
                </div>
                <div class="btn-group">
                    <a href="/#/cart" class="btn btn-default btn-large">返回购物车</a>
                    <a href="javascript:;" class="btn btn-large" @click="orderSubmit">去结算</a>
                </div>
                </div>
            </div>
        </div>
        <!--删除弹窗确认-->
        <modal
            btnType="1"
            title="删除确认"
            :showModal="showDelModal"
            @cancel="closeModal"
            @submit="submitAction">
            <template v-slot:body>
                <p>确定要删除该地址吗？</p>
            </template>
        </modal>
        <!--新增、编辑弹窗确认-->
        <modal
            :title="addOrEditTitle"
            btnType="1"
            :showModal="showEditModal"
            @cancel="closeModal"
            @submit="submitAction"
        >
        <template v-slot:body>
            <div class="edit-wrap">
            <div class="item">
                <input type="text" class="input" placeholder="姓名" v-model="selectedItem.receiverName">
                <input type="text" class="input" placeholder="手机号" v-model="selectedItem.receiverMobile">
            </div>
            <div class="item">
                <select name="province"
                v-model="selectedItem.receiverProvince">
                    <option
                        v-for="(item, index) of areas"
                        :key="index"
                        :value="item.name">
                        {{item.name}}
                    </option>
                </select>
                <select name="city"
                v-model="selectedItem.receiverCity">
                    <option
                        v-for="(item, index) of getCities"
                        :key="index"
                        :value="item.name">
                    {{item.name}}
                    </option>
                </select>
                <select name="district"  v-model="selectedItem.receiverDistrict" >
                    <option
                        v-for="(item, index) of getAreas"
                        :key="index"
                        :value="item">
                    {{item}}
                    </option>
                </select>
            </div>
            <div class="item">
                <textarea v-model="selectedItem.receiverAddress" name="street" placeholder="请输入详细地址"></textarea>
            </div>
            <div class="item">
                <input v-model="selectedItem.receiverZip" type="text" class="input" placeholder="邮编">
            </div>
            </div>
        </template>
        </modal>

    </div>
</template>
<script>
import Modal from '@/components/Modal.vue';
import OrderHeader from '@/components/OrderHeader';
export default {
    name: 'OrderConfirm',
    components: {
        Modal,
        OrderHeader,
    },
    data () {
        return {
            addressList: [], // 地址列表
            cartList: [], // 购物车选中的商品
            totalCount: 0, // 商品总件数
            totalPrice: 0, // 商品总金额
            selectedArr: '', // 当前选中的地址
            selectedItem: {}, // 要操作删除，编辑的对象
            actionType: '', // 0-新增,1-删除,2-编辑
            addOrEditTitle: '', // 新增or编辑标题
            showDelModal: false,
            showEditModal: false,
            areas: [],
        };
    },
    computed: {
        // 根据省获取对应的城市，级联
        getCities () {
            let cityList = [];
            if (this.selectedItem.receiverProvince) {
                const result = this.areas.filter(item => item.name === this.selectedItem.receiverProvince);
                cityList = result[0].city;
            }
            return cityList;
        },
        // 根据省市获取对应区县，级联
        getAreas () {
            let areasList = [];
            if (this.selectedItem.receiverProvince && this.selectedItem.receiverCity) {
                const cities = this.areas.filter(item => item.name === this.selectedItem.receiverProvince);
                const result = cities[0].city.filter(item => item.name === this.selectedItem.receiverCity);
                areasList = result[0].area;
            }
            return areasList;
        },

    },
    methods: {

        getCartList () {
            this.$api.Cart.getCartList().then(res => {
                this.cartList = res.cartProductVoList.filter(item => item.productSelected);
                this.cartList.map(item => {
                    this.totalCount += item.quantity;
                });
                this.totalPrice = res.cartTotalPrice;
            });
        },
        getAddressList () {
            this.$api.Address.getAddressList().then(res => {
                this.addressList = res.list;
            });
        },
        openDelModal (item) {
            this.actionType = 1;
            this.selectedItem = item;
            this.showDelModal = true;
        },
        openEditModal (item) {
            this.actionType = 2;
            this.selectedItem = item;
            this.showEditModal = true;
            this.addOrEditTitle = '编辑地址';
        },
        openAddressModal () {
            this.actionType = 0;
            this.addOrEditTitle = '新增地址';
            this.showEditModal = true;
        },
        closeModal () {
            this.showDelModal = false;
            this.showEditModal = false;
            this.actionType = '';
            this.selectedItem = {};
        },
        // 新增，删除，编辑地址
        submitAction () {
            let params = {};
            if (this.actionType === 0 || this.actionType === 2) {
                const {
                    receiverName,
                    receiverPhone = '',
                    receiverMobile,
                    receiverProvince,
                    receiverCity,
                    receiverDistrict,
                    receiverAddress,
                    receiverZip,
                } = this.selectedItem;
                // 校验
                if (!receiverName) {
                    this.$message.warning('请输入收货人名称');
                    return;
                } else if (!/^\d{11}$/.test(receiverMobile)) {
                    this.$message.warning('请输入正确的收货人手机号码');
                    return;
                } else if (!receiverProvince) {
                    this.$message.warning('请选择省份');
                    return;
                } else if (!receiverCity) {
                    this.$message.warning('请选择城市');
                    return;
                } else if (!receiverDistrict) {
                    this.$message.warning('请选择区县');
                    return;
                } else if (!receiverAddress) {
                    this.$message.warning('请输入详细收货地址');
                    return;
                } else if (!/^\d{6}$/.test(receiverZip)) {
                    this.$message.warning('请输入6位邮编');
                    return;
                }
                params = {
                    receiverName,
                    receiverPhone,
                    receiverMobile,
                    receiverProvince,
                    receiverCity,
                    receiverDistrict,
                    receiverAddress,
                    receiverZip,
                };
            }
            if (this.actionType === 0) {
                // 新增
                this.$api.Address.addAddress(params).then(res => {
                    console.log(res);
                    this.closeModal();
                    this.$message.success('新增地址成功');
                    this.getAddressList();
                });
            } else if (this.actionType === 1) {
                // 删除
                this.$api.Address.deleteAddressById(this.selectedItem.id).then(res => {
                    console.log(res);
                    this.closeModal();
                    this.$message.success('删除地址成功');
                    this.getAddressList();
                });
            } else if (this.actionType === 2) {
                // 编辑
                this.$api.Address.updateAddress(this.selectedItem.id, params).then(res => {
                    console.log(res);
                    this.closeModal();
                    this.$message.success('修改地址成功');
                    this.getAddressList();
                });
            }
        },
        orderSubmit () {
            const addrList = this.addressList.filter(item => item.id === this.selectedArr.id);
            if (addrList.length === 0) {
                this.$message.error('请选择收货地址');
                return;
            }
            this.$api.Order.createOrder({
                shippingId: this.selectedArr.id,
            }).then(res => {
                this.$message.success('提交订单成功');
                this.$router.push({
                    path: '/order/pay',
                    query: {
                        orderNo: res.orderNo,
                    },
                });
            });
        },
        getAreasData () {
            this.$api.Area.getAreas().then(res => {
                this.areas = res;
            });
        },

    },
    mounted () {
        this.getCartList();
        this.getAddressList();
        this.getAreasData();
    },
};
</script>
<style lang="scss" scoped>
.orderConfirm{
    .wrapper{
      background-color:#F5F5F5;
      padding-top:30px;
      padding-bottom:84px;
      .order-box{
        background-color:#ffffff;
        padding-left: 40px;
        padding-bottom: 40px;
        .addr-title{
          font-size: 20px;
          color: #333333;
          font-weight: 200;
          margin-bottom:21px;
        }
        .item-address{
          padding-top: 38px;
          .addr-list{
            .addr-info,.addr-add{
              box-sizing:border-box;
              float: left;
              width:271px;
              height:180px;
              border:1px solid #E5E5E5;
              margin-right: 15px;
              padding: 15px 24px;
              font-size: 14px;
              color:#757575;
              margin-top: 10px;
            }
            .addr-info{
              cursor:pointer;
              h2{
                height:27px;
                font-size:18px;
                font-weight: 300;
                color:#333;
                margin-bottom:10px;
              }
              .street{
                height:50px;
              }
              .action{
                height:50px;
                line-height:50px;
                .icon{
                  width: 20px;
                  height: 20px;
                  fill: #666666;
                  vertical-align: middle;
                  &:hover{
                    fill: #FF6700;
                  }
                }
              }
              &.checked{
                border:1px solid #ff6700;
              }
            }
            .addr-add{
              text-align:center;
              color: #999999;
              cursor:pointer;
              .icon-add{
                width:30px;
                height:30px;
                border-radius:50%;
                background:url('/imgs/icon-add.png') #E0E0E0 no-repeat center;
                background-size:14px;
                margin: 0 auto;
                margin-top: 45px;
                margin-bottom: 10px;
              }
            }
          }
        }
        .item-good{
          margin-top:34px;
          border-bottom: 1px solid #E5E5E5;
          padding-bottom: 12px;
          h2{
            border-bottom:1px solid #E5E5E5;
            padding-bottom: 5px;
          }
          li{
            display:flex;
            align-items: center;
            height:40px;
            line-height:40px;
            margin-top:10px;
            font-size:16px;
            color:#333333;
            .good-name{
              flex:5;
              img{
                width:30px;
                height:30px;
                vertical-align:middle;
              }
            }
            .good-price{
              flex:2;
            }
            .good-total{
              padding-right:44px;
              color:#FF6600;
            }
          }
        }
        .item-shipping,.item-invoice{
          margin-top:31px;
          line-height: 20px;
          h2{
            display: inline-block;
            margin-right: 71px;
            font-size: 20px;
            width: 80px;
          }
          span,a{
            font-size:16px;
            color:#FF6700;
            margin-right:23px;
          }
        }
        .detail{
          padding: 50px 44px 33px 0;
          border-bottom: 1px solid #f5f5f5;
          text-align: right;
          font-size: 16px;
          color: #666666;
          .item-val{
            color:#FF6700;
          }
          .item{
            line-height: 15px;
            margin-bottom: 12px;
          }
          .item-val{
            display:inline-block;
            width:100px;
          }
          .item-total{
            .item-val{
              font-size:28px;
            }
          }
        }
        .btn-group{
          margin-top: 37px;
          text-align: right;
        }
      }
    }
    .edit-wrap{
      font-size:14px;
      .item{
        margin-bottom:15px;
        .input{
          display:inline-block;
          width:40%;
          height:40px;
          line-height:40px;
          padding-left:15px;
          padding-right: 15px;
          border:1px solid #E5E5E5;
          &+.input{
            margin-left:14px;
          }
        }
        select{
          width: 30%;
          height:40px;
          line-height:40px;
          border:1px solid #E5E5E5;
          padding-left:15px;
          &+select {
              margin-left:14px;
          }
        }
        textarea{
          height:62px;
          width:95%;
          padding:13px 15px;
          box-sizing:border-box;
          border:1px solid #E5E5E5;
        }
      }
    }
  }

</style>
